<template>
  <!-- 流水详情 -->
  <div class="container">
    <!-- 类型 -->
    <div class="flex_y_center">
      <div class="title_txt">类型：</div>
      <div>{{ oFlowDetails.bill_type_name }}</div>
    </div>
    <!-- 客户名称 -->
    <div class="flex_y_center">
      <div class="title_txt">客户名称：</div>
      <div>{{ oFlowDetails.customer_name }}</div>
    </div>
    <!-- 客户电话 -->
    <div class="flex_y_center">
      <div class="title_txt">客户电话：</div>
      <div>{{ oFlowDetails.customer_tel }}</div>
    </div>
    <!-- 交易时间 -->
    <div class="flex_y_center">
      <div class="title_txt">交易时间：</div>
      <div>{{ oFlowDetails.created_at }}</div>
    </div>
    <!-- 业务单号 -->
    <div class="flex_y_center">
      <div class="title_txt">业务单号：</div>
      <div>{{ oFlowDetails.order_info }}</div>
    </div>
    <!-- 支付流水号 -->
    <div class="flex_y_center">
      <div class="title_txt">支付流水号：</div>
      <div>{{ oFlowDetails.transaction_sn }}</div>
    </div>
    <!-- 流水状态 -->
    <div class="flex_y_center">
      <div class="title_txt">流水状态：</div>
      <div>{{ oFlowDetails.status == 'success' ? '成功' : '失败' }}</div>
    </div>
    <!-- 交易金额 -->
    <div class="flex_y_center">
      <div class="title_txt">交易金额：</div>
      <div>{{ oFlowDetails.init_amt }}</div>
    </div>
    <!-- 实际金额 -->
    <div class="flex_y_center">
      <div class="title_txt">实际金额：</div>
      <div>{{ oFlowDetails.trx_amt }}</div>
    </div>
    <!-- 支付方式 -->
    <div class="flex_y_center">
      <div class="title_txt">支付方式：</div>
      <div>{{ oFlowDetails.payment_name }}</div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      oFlowDetails: {
        type: Object,
        default() {
          return {}
        },
      },
    },
    data() {
      return {}
    },
    methods: {},
  }
</script>

<style scoped>
  .container > div {
    margin-bottom: 15px;
  }
  .title_txt {
    width: 40%;
    text-align: right;
  }
</style>
